<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('全国薪资列表')"/>
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/echarts2.min.js}"></script>
    <title>企业测试页面</title>
</head>
<body>
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="dept-form" style="height: 50px">
                <div class="select-list">
                    <ul>
                        <li>
                            职位：<select name="record">
                            <option value="0">全部</option>
                            <option value="1">Java开发</option>
                            <option value="2">前端开发</option>
                            <option value="3">大数据</option>
                            <option value="4">软件测试</option>
                            <option value="5">UI设计师</option>
                        </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.treeTable.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
            <div class="col-sm-6"  style="margin:1%;background-color: white;width: 48%">
                <div style="height: 50px;font-size: 20px;line-height: 60px;">各职位与城市之间的关系</div>
                <hr style="margin: 0px">
                <div id="enterprise_one" style="height: 550px;margin:10px"></div>
            </div>
            <div class="col-sm-6"  style="margin:1%;background-color: white;width: 48%" >
                <div style="height: 50px;font-size: 20px;line-height: 60px;">各职位与企业规模之间的关系</div>
                <hr style="margin: 0px">
                <div id="enterprise_two" style="height: 550px;margin:10px"></div>

            </div>
        </div>

    </div>
</div>
<script>
    var chartDom1 = document.getElementById('enterprise_one');
    var myChart1 = echarts.init(chartDom1);
    var option;

    option = {
        title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' },
                    { value: 1048, name: 'Search Engine1' },
                    { value: 735, name: 'Direct1' },
                    { value: 580, name: 'Email1' },
                    { value: 484, name: 'Union Ads1' },
                    { value: 300, name: 'Video Ads1' },
                    { value: 1048, name: 'Search Engine2' },
                    { value: 735, name: 'Direct2' },
                    { value: 580, name: 'Email2' },
                    { value: 484, name: 'Union Ads2' },
                    { value: 300, name: 'Video Ads2' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart1.setOption(option);


    var chartDom1 = document.getElementById('enterprise_two');
    var myChart1 = echarts.init(chartDom1);
    var option;

    option = {
        xAxis: {
            type: 'category',
            data: ['少于15人', '15-150人', '150-500人', '500-2000人', '2000人以上']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [50, 92, 60, 73, 20],
                type: 'line',
                smooth: true
            }
        ]
    };

    option && myChart1.setOption(option);


</script>

</body>
</html>